<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			var responseJson = {"objects":[
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011121979489/thumb_02cbdf44b90299d0f628bcdccf4db610.jpg","docType":"PROFILE","documentId":"2011121979489","name":"Aarthy Soundararajan","ownerAccountId":"2011121979489","permaLinkId":"2011121979489","profilePrimaryEmail":"aarthy.s@pramati.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011011753561/thumb_51e1debb4a20afdff0c79d31868aedcd.jpg","docType":"PROFILE","documentId":"2011011753561","name":"Aaruna Godthi","ownerAccountId":"2011011753561","permaLinkId":"2011011753561","profilePrimaryEmail":"aaruna.g@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/201005263772/thumb_2eb74c236a968173dc406b57640fc69d.jpg","docType":"PROFILE","documentId":"201005263772","name":"Aatish kumar","ownerAccountId":"201005263772","permaLinkId":"201005263772","profilePrimaryEmail":"aatish.k@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","communityCategory":"General","docType":"COMMUNITY","documentId":"20090826326","name":"Admin","ownerName":"","permaLinkId":"20090826326","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"","communityCategory":"General","docType":"COMMUNITY","documentId":"2010101925531","name":"Agile Development","ownerName":"","permaLinkId":"2010101925531","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"649e2658d749466e77c63b26fdd667c1.png","communityCategory":"Fun","docType":"COMMUNITY","documentId":"2009010619","name":"All that jazzzz","ownerName":"","permaLinkId":"2009010619","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011121979489/thumb_02cbdf44b90299d0f628bcdccf4db610.jpg","docType":"PROFILE","documentId":"2011121979489","name":"Aarthy Soundararajan","ownerAccountId":"2011121979489","permaLinkId":"2011121979489","profilePrimaryEmail":"aarthy.s@pramati.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011011753561/thumb_51e1debb4a20afdff0c79d31868aedcd.jpg","docType":"PROFILE","documentId":"2011011753561","name":"Aaruna Godthi","ownerAccountId":"2011011753561","permaLinkId":"2011011753561","profilePrimaryEmail":"aaruna.g@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/201005263772/thumb_2eb74c236a968173dc406b57640fc69d.jpg","docType":"PROFILE","documentId":"201005263772","name":"Aatish kumar","ownerAccountId":"201005263772","permaLinkId":"201005263772","profilePrimaryEmail":"aatish.k@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","communityCategory":"General","docType":"COMMUNITY","documentId":"20090826326","name":"Admin","ownerName":"","permaLinkId":"20090826326","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"","communityCategory":"General","docType":"COMMUNITY","documentId":"2010101925531","name":"Agile Development","ownerName":"","permaLinkId":"2010101925531","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"649e2658d749466e77c63b26fdd667c1.png","communityCategory":"Fun","docType":"COMMUNITY","documentId":"2009010619","name":"All that jazzzz","ownerName":"","permaLinkId":"2009010619","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011121979489/thumb_02cbdf44b90299d0f628bcdccf4db610.jpg","docType":"PROFILE","documentId":"2011121979489","name":"Aarthy Soundararajan","ownerAccountId":"2011121979489","permaLinkId":"2011121979489","profilePrimaryEmail":"aarthy.s@pramati.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011011753561/thumb_51e1debb4a20afdff0c79d31868aedcd.jpg","docType":"PROFILE","documentId":"2011011753561","name":"Aaruna Godthi","ownerAccountId":"2011011753561","permaLinkId":"2011011753561","profilePrimaryEmail":"aaruna.g@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/201005263772/thumb_2eb74c236a968173dc406b57640fc69d.jpg","docType":"PROFILE","documentId":"201005263772","name":"Aatish kumar","ownerAccountId":"201005263772","permaLinkId":"201005263772","profilePrimaryEmail":"aatish.k@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","communityCategory":"General","docType":"COMMUNITY","documentId":"20090826326","name":"Admin","ownerName":"","permaLinkId":"20090826326","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"","communityCategory":"General","docType":"COMMUNITY","documentId":"2010101925531","name":"Agile Development","ownerName":"","permaLinkId":"2010101925531","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"649e2658d749466e77c63b26fdd667c1.png","communityCategory":"Fun","docType":"COMMUNITY","documentId":"2009010619","name":"All that jazzzz","ownerName":"","permaLinkId":"2009010619","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011121979489/thumb_02cbdf44b90299d0f628bcdccf4db610.jpg","docType":"PROFILE","documentId":"2011121979489","name":"Aarthy Soundararajan","ownerAccountId":"2011121979489","permaLinkId":"2011121979489","profilePrimaryEmail":"aarthy.s@pramati.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/2011011753561/thumb_51e1debb4a20afdff0c79d31868aedcd.jpg","docType":"PROFILE","documentId":"2011011753561","name":"Aaruna Godthi","ownerAccountId":"2011011753561","permaLinkId":"2011011753561","profilePrimaryEmail":"aaruna.g@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"/portal/profile/avatar/image/201005263772/thumb_2eb74c236a968173dc406b57640fc69d.jpg","docType":"PROFILE","documentId":"201005263772","name":"Aatish kumar","ownerAccountId":"201005263772","permaLinkId":"201005263772","profilePrimaryEmail":"aatish.k@imaginea.com","profileRole":"USER","visibility":"PUBLIC"},
				{"@type":"searchResult","communityCategory":"General","docType":"COMMUNITY","documentId":"20090826326","name":"Admin","ownerName":"","permaLinkId":"20090826326","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"","communityCategory":"General","docType":"COMMUNITY","documentId":"2010101925531","name":"Agile Development","ownerName":"","permaLinkId":"2010101925531","tags":"","visibility":"PUBLIC"},
				{"@type":"searchResult","avatar":"649e2658d749466e77c63b26fdd667c1.png","communityCategory":"Fun","docType":"COMMUNITY","documentId":"2009010619","name":"All that jazzzz","ownerName":"","permaLinkId":"2009010619","tags":"","visibility":"PUBLIC"}
				]};
		</script>
		
		<style>
			#search-box {
				width: 200px;
			}
			
			#search-term {
				width: 194px;
			}
			
			#search-dropdown {
				position: absolute;
				width: 200px;
				border-width: 0px 1px 1px 1px;
				border-style: solid;
				border-color: red;
			}
			
			.search-dropdown-item {
				cursor: pointer;
			}
			.search-dropdown-item:hover {
				background-color: #cccccc;
			}
			
			.search-dropdown-item-selected {
				background-color: yellow !important;
			}
			
			#search-dropdown-footer {
				border-top: 1px solid red;
			}
			
			#search-dropdown-footer-content {
				white-space: nowrap;
				float: right;
				margin-right: 5px;
			}
			
			#search-dropdown-left-nav, #search-dropdown-right-nav {
				font-family: verdana;
				font-size: 12px;
				cursor: pointer;
			}
			
			#search-dropdown-footer-info {
				padding: 0px 5px;
				font-family: verdana;
				font-size: 10px;
			}
			
			.floatRight {
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="search-box"><input type="text" id="search-term" name="searchTerm" value=""/></div>
	</body>
	<script type="text/javascript">
		/**
		 * @author: Kapil Kashyap
		 */
		searchDropDownPlugin = (function($) {
			var items = [],
				pageLimit = 5,
				currentPage = 1,
				maximumPages = 1,
				totalSearchResults = null,
				startIndex = null,
				endIndex = null,
				paginationFooter = '<div id="search-dropdown-footer">';
					paginationFooter += '<div id="search-dropdown-footer-content">';
						paginationFooter += '<span id="search-dropdown-left-nav">&lt;</span>';
						paginationFooter += '<span id="search-dropdown-footer-info"></span>';
						paginationFooter += '<span id="search-dropdown-right-nav">&gt;</span>';
					paginationFooter += '</div>';
				paginationFooter += '</div>';

			
				
			return {
				reposition: function( componentSelector, relativeToSelector ) {
					var $component = $( componentSelector ),
						$relativeTo = $( relativeToSelector ),
						
						_relativeToPosition = $relativeTo.position(),
						_relativeToHeight = $relativeTo.height();
					
					$component.css('left', _relativeToPosition.left + 1);
					$component.css('top', _relativeToPosition.top + _relativeToHeight - 2);					
				},
				
				initialize: function( config ) {
					config = config ? config : {};
					pageLimit = config && config.pageLimit ? config.pageLimit : 5;
					
					$( '#search-term' ).keyup(function() {
						var $search_dropdown = null;
						
						items = [];
						
						if( this.value.trim().length > 0 ) {
							$.each(responseJson.objects, function(index, item) {
								items.push('<div id="' + item.profilePrimaryEmail + '" class="search-dropdown-item">' + item.name + '</div>');
							});

							if( $( '#search-dropdown' ).length > 0 ) {
								$( '#search-dropdown' ).html( '' );
								$( '#search-dropdown' ).html( searchDropDownPlugin.pagination( items, pageLimit, currentPage ) );
								searchDropDownPlugin.updateFooterInfo();
								searchDropDownPlugin.reposition( '#search-dropdown', '#search-box' );
							}
							else {
								$search_dropdown = $('<div/>', {
									'id': 'search-dropdown',
									'width': $( '#search-term' ).width(),
									html: searchDropDownPlugin.pagination( items, pageLimit, currentPage )
								});
								
								$( 'body' ).append( $search_dropdown );
								searchDropDownPlugin.updateFooterInfo();
								searchDropDownPlugin.reposition( '#search-dropdown', '#search-box' );
							}
						}
						else {
							$search_dropdown = $( '#search-dropdown' );
							if( $( '#search-dropdown' ).length > 0 ) {
								$search_dropdown.remove();
							}
							// re-initialize the current page
							currentPage = 1;
						}
					});
					
					$( '.search-dropdown-item' ).live('click', function() {
						$( '#search-dropdown' ).find( '.search-dropdown-item-selected' ).removeClass( 'search-dropdown-item-selected' );
						$( this ).addClass( 'search-dropdown-item-selected' );
					});
					
					$( '#search-dropdown-right-nav' ).live('click', function() {
						if(currentPage < maximumPages) {
							currentPage++;
							$( '#search-dropdown' ).html( searchDropDownPlugin.pagination( items, pageLimit, currentPage ) );
							searchDropDownPlugin.updateFooterInfo();
						}
						//console.log("right nav clicked >>> " + currentPage);
					});
					
					$( '#search-dropdown-left-nav' ).live('click', function() {
						if(currentPage > 1) {
							currentPage--;
							$( '#search-dropdown' ).html( searchDropDownPlugin.pagination( items, pageLimit, currentPage ) );
							searchDropDownPlugin.updateFooterInfo();
						}
						//console.log("left nav clicked >>> " + currentPage);
					});

				},
				
				pagination: function(items, pageLimit) {
					var threshold = pageLimit * currentPage,
						paginatedItems = [];
						
					maximumPages = (items.length % pageLimit > 0) ? Math.floor( items.length / pageLimit ) + 1 : Math.floor( items.length / pageLimit );
					totalSearchResults = items.length;
					
					$.each(items, function(index, item) {
						if(index == (threshold - pageLimit)) {
							startIndex = index;
						}
						if(index >= (threshold - pageLimit) && index < threshold) {
							paginatedItems.push(item);
							endIndex = index;
						}
					});
					
					if(maximumPages > 1) {
						paginatedItems.push(paginationFooter);
					}
					return paginatedItems.join( '' );
				},
				
				updateFooterInfo: function() {
					//$( '#search-dropdown-footer-info' ).html( currentPage + ' of ' + maximumPages);
					$( '#search-dropdown-footer-info' ).html( (startIndex + 1) + ' - ' + (endIndex + 1) + ' of ' + totalSearchResults);
				}
			}
		})(jQuery);
		
		jQuery( document ).ready(function() {
			searchDropDownPlugin.initialize( {pageLimit: 8} );
		});
	</script>
</html>
